<template>
  <el-dialog v-model="model" width="600" top="10vh" title="移动到" draggable>
    <p style="display: flex; align-items: center">
      <el-icon color="#f8b83f" size="24"><FolderOpened /></el-icon>
      {{ appendParentData && appendParentData.title }}
    </p>
    <div style="display: flex; align-items: center; padding: 10px 0">
      <span> 移动到：</span>
      <el-input style="flex: 1" v-model="movePath" disabled></el-input>
    </div>
    <div class="folder-wrapper" style="height: 300px; overflow-y: auto">
      <el-tree
        style="max-width: 600px"
        :data="folderData"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        highlight-current
        @node-click="handleAddToFolder"
        ref="moveRef"
      >
        <template #default="{ node, data }">
          <span
            class="custom-tree-nodex"
            style="display: flex; align-items: center"
          >
            <el-icon color="#f8b83f" size="24"><FolderOpened /></el-icon>
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="confirmMoveFolder"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch, inject, nextTick, onMounted, onUnmounted } from 'vue'
import { addLabel, flatTree } from '@/utils/tools.ts'
import { ElMessage } from 'element-plus'
import { httpMovefolder } from '@/api/note.js'
// @ts-ignore
import useNoteStore from '@/stores/note'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const noteState = useNoteStore()
const router = useRouter()
const { noteData, selectedFolder } = storeToRefs(noteState)
const props = defineProps({
  appendParentData: {
    type: Object,
    default: () => {},
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
})
const moveRef = ref()
const movePath = ref('')
const folderData = ref([])
const model = defineModel()
const targetFolderData = ref({})
const updateBreadcrumb = inject('updateBreadcrumb')
// 去除自己文件夹和笔记
function handleToTree(data) {
  let arr = []
  data.forEach((item) => {
    if (item.id !== props.appendParentData.id) {
      if (item.children) {
        item.children = handleToTree(item.children)
        arr.push(item)
      } else {
        // 文件夹
        item.type == 1 && arr.push(item)
      }
    }
  })
  return arr
}
watch(
  () => [props.appendParentData, model.value],
  () => {
    if (model.value) {
      
      folderData.value = handleToTree(
        JSON.parse(JSON.stringify(noteData.value)),
      )
      addLabel(folderData.value)
      nextTick(() => {
        moveRef.value && moveRef.value.setCurrentKey(noteData.value[0].id) // 默认是全部文件夹
        movePath.value = noteData.value[0].label
      })
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

const handleAddToFolder = (data) => {
  targetFolderData.value = data
  movePath.value = data.path
}
const confirmMoveFolder = async (item) => {
  // 移动笔记 type =2
  const flatTreeData = flatTree(noteData.value)
  targetFolderData.value = targetFolderData.value.id
    ? targetFolderData.value
    : noteData.value[0]
  let target = flatTreeData.find((x) => x.id == targetFolderData.value.id)
  let flag =
    target.children &&
    target.children.some((item) => item.label == props.appendParentData.title)
  if (target && flag) {
    return ElMessage({
      message: '相同笔记名称已存在该文件',
      type: 'warning',
    })
  }
  const res = await httpMovefolder({
    folder_id: props.appendParentData.id,
    parent_id: targetFolderData.value.id,
  })
  if (res) {
    ElMessage({
      message: '文件夹中移动成功',
      type: 'success',
    })
    // selectedFolder.value = noteData.value[0]
    model.value = false
    noteState.getFolderListData()
    noteState.getShortCutList()
    // 编辑笔记的时候移动笔记
    if (props.isEdit) {
      updateBreadcrumb()
    } else {
      noteState.getList()
    }
    // noteState.getList()
    // router.push('/file/note/' + noteData.value[0].id)
  }
}
// @ts-ignore
</script>
<style scoped lang="scss"></style>
